<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script>
        window.onload=function(){
        //  document.getElementById();
        //  document.getElementsByClassName();
        //  document.getElementsByName();
        //  document.getelementsByTagname();

        // document.querySelector(); 对象
        // document.querySelectorAll(); 数组
            
        //  var li=document.querySelector("#li1");
        //  li.parentElement.style.color="red";
        //       console.log(li.parentElement.parentElement.parentElement.parentElement);
        //       console.log(li.parentNode.parentNode.parentNode.parentNode.parentNode);
        // }

        // var ul=document.querySelector("ul");
        // console.log(ul.childNodes);    文本节点
        // console.log(ul.children);       不包括文本节点


        // var li= document.querySelector("#li1");
        //   console.log(li.nextElementSibling);
        //   console.log(li.previousElementSibling);
        //   console.log(li.nextSibling);

        // 样式  style
        //    var li= document.querySelector("#li1");
        //    li.style.color="red"
        //   li.style.backgrond-color="#ccc"; 不起作用
        //   li.style.backgrondColor="#ccc"; 驼峰命名发
        //   li.style["backgrond-color"]="#ccc";

        // 属性  attributes
        //   console.log(li.id);
        //   console.log(li.data-id);
        //   console.log(li["data-id"]);
        //   console.log(li.attributes["data-id"])  name value;
        //   console.log(li.className);
        
        // 事件 *（常用事件）
        // *click 点击
        // *change 单选 多选状态改变 下拉框选项改变  文本框的值改变

        // onchange 事件
        // onchange 事件常用于输入字段的验证。
        // 实例
        //  <input type="text" id="fname" onchange="upperCase()">
        // *mouseover 
        // *mouseout 
        // keydown 
        // *keypress 
        // keyup 


        //    var btn=document.querySelector("button");
        //    btn.onclick=function(){
        //        console.log(this.value);  交互控件的值
        //    }
        //    var li=document.querySelector("#li1");
        //    li.onclick=function(){
            // console.log(this.innerHTML); html
            // console.log(this.innerText);  Text
              
            // console.log(this.outerHTML);  含有本身

        //    }

        var select=document.querySelector("select");
        // select.onclick=function(){
        //     console.log(this.value);
        // }
        select.onchange=function(){
            console.log(this.value);
        }
        }
    </script>
</head>
<body>
    <ul>
        <!-- id2="2" 非原子属性 -->
        <!-- <li id="li1"  class="li" data-id="0" id2="2">列表1<span>99</span></li>
        <li>列表2</li>
        <li>列表3</li>
        <li>列表4</li>
        <li>列表5</li>
    </ul> 
    <button value="click">
      点击
    </button> -->
     <!-- size="0" 显示全部   multiple="" 可写可不写-->
    <select name="" id="" size="1" > 
        <option value="1">选项1</option>
        <option value="2">选项2</option>
        <option value="3">选项3</option>
    </select>
</body>
</html>